<template>
  <div class="login-container">
    <div class="title">{{ manageName }}</div>
    <div class="login">
      <el-form :model="ruleForm" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter="submitForm"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script  lang="ts">
import {defineComponent,getCurrentInstance,ref,reactive} from "vue";
import mixin from "@/mixins/mixin";
import {HttpManager} from "@/api";
import {NavName,RouterName,MANAGENAME} from "@/enums";

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance();
    const {routerManager,changeIndex} = mixin();

    const manageName = ref(MANAGENAME);
    const ruleForm = reactive({
      username: "admin",
      password: "123",
    });

    const rules = reactive({
      username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    });
    async function submitForm() {
      try {
        let username = ruleForm.username;
        let password = ruleForm.password;
        const result = (await HttpManager.getLoginStatus({username,password})) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
        if (result.success)
          routerManager(RouterName.Home,{path:RouterName.Home});
      } catch (error) {
        console.error(error);
      }
    }
    return {
      manageName,
      ruleForm,
      rules,
      submitForm,
    };
  },
});
</script>


<style scoped>
.login-container {
  position: relative;
  background: url("../assets/images/background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}

.login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
}

.login-btn {
  width: 100%;
}
</style>

